<template>
  <div class="app-container">
    <el-row class="form-wrapper">
      <el-col :xs="24" :sm="24" :lg="{span: 12, offset: 6}">
        <el-form ref="dataForm" :label-width="formLabelWidth" :rules="rules" :model="form">
          <el-form-item label="公告类型" prop="category">
            <el-select v-model="form.category" size="medium" filterable placeholder="请选择" style="width: 100%">
              <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <el-input v-model="form.content" maxlength="128" rows="3" type="textarea" auto-complete="off"/>
          </el-form-item>
          <el-form-item>
            <el-button @click="$refs['dataForm'].resetFields()">取 消</el-button>
            <el-button type="primary" @click.native.prevent="submitForm">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { sendNotification } from '@/api/notification'
export default {
  name: 'Notification',
  data() {
    return {
      categoryOptions: [{
        value: 1,
        label: '系统消息'
      },
      {
        value: 2,
        label: '维护公告'
      }],
      form: {
        notiType: 1, // 公告
        category: '',
        content: ''
      },
      formLabelWidth: '100px',
      rules: {
        category: [{ required: true, message: '请选择公告类型', trigger: 'change' }],
        content: [{ required: true, message: '请输入公告内容', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          sendNotification(this.form).then(() => {
            this.actiniaSucc('公告发送成功')
            this.$refs['dataForm'].resetFields()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
  .form-wrapper {
    text-align: center;
  }
</style>
